<template>
  <el-drawer
    :title="title"
    v-model="isShow"
    :destroy-on-close="true"
    direction="rtl"
    size="45%"
    append-to-body
    @close="closeDra"
  >
    <el-form
      :model="formData"
      ref="form"
      :rules="formRules"
      label-position="top"
      label-width="80px"
      :inline="false"
    >
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="所属小区" prop="community_code">
            <!-- <el-input></el-input> -->
            <el-select
              v-model="formData.community_code"
              @change="changeBuilding"
              style="width: 100%"
            >
              <el-option
                v-for="item in communityList"
                :key="id"
                :label="item.name"
                :value="item.code"
              >
                {{ item.name }}</el-option
              >
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="所属栋数" prop="building_code">
            <el-select v-model="formData.building_code" style="width: 100%">
              <el-option
                v-for="item in buildingList"
                :key="id"
                :label="item.name"
                :value="item.code"
              >
                {{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="房产名称" prop="name">
            <el-input
              placeholder="请输入房产名称"
              v-model="formData.name"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="户主姓名" prop="owner_name">
            <el-input
              placeholder="请输入户主姓名"
              v-model="formData.owner_name"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="联系方式" prop="owner_tel">
            <el-input
              placeholder="请输入联系方式"
              v-model="formData.owner_tel"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="房间数" prop="rooms">
            <el-input
              placeholder="请输入房间数"
              v-model="formData.rooms"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="单元信息" prop="unit">
            <el-input
              placeholder="请输入单元信息"
              v-model="formData.unit"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="楼层信息" prop="floor">
            <el-input
              placeholder="请输入楼层信息"
              v-model="formData.floor"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="入住时间" prop="enter_time">
            <el-date-picker
              v-model="defaultFormData.enter_time"
              type="date"
              placeholder="请输入入住时间"
              @change="timeChange"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="房产描述" prop="desc">
            <el-input
              placeholder="请输入房产描述"
              v-model="formData.desc"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <br />
      <el-row :gutter="20" type="flex" justify="end">
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="isShow = false">取消</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { computed, nextTick, onMounted, reactive, ref } from "vue";
import { getCommunityList, getBuildingList } from "@/api/community_yuan.js";
import { addHouseList, getHouseInfo, editHoustLoist } from "@/api/house.js";
import { ElMessage } from "element-plus";

const isShow = ref(false);
const form = ref();
const communityList = ref([]);
const buildingList = ref([]);
const emit = defineEmits("updateList");

const defaultFormData = reactive({
  building_code: "",
  community_code: "",
  create_time: "",
  desc: "",
  enter_time: 0,
  floor: "",
  name: "",
  owner_name: "",
  owner_tel: "",
  rooms: "",
  unit: "",
  id: null,
});

const formData = reactive({ ...defaultFormData });

const formRules = {
  building_code: [
    { required: true, message: "请选择楼栋信息", trigger: "change" },
  ],
  community_code: [
    { required: true, message: "请输选择所属小区", trigger: "change" },
  ],
  desc: [{ required: true, message: "请输入房产描述", trigger: "blur" }],
  enter_time: [
    { required: true, message: "请选择入住时间", trigger: "change" },
  ],
  floor: [{ required: true, message: "请输入楼层信息", trigger: "blur" }],
  name: [{ required: true, message: "请输入房产名称", trigger: "blur" }],
  owner_name: [{ required: true, message: "请输入户主姓名", trigger: "blur" }],
  owner_tel: [{ required: true, message: "请输入户主电话", trigger: "blur" }],
  rooms: [{ required: true, message: "请输入房间数", trigger: "blur" }],
  unit: [{ required: true, message: "请输入单元信息", trigger: "blur" }],
};

const initData = async () => {
  let { data } = await getCommunityList();
  communityList.value = data;
};

const timeChange = (val) => {
  // console.log(val)
  formData.enter_time = +new Date(val);
};

onMounted(() => {
  initData();
});

const changeBuilding = async () => {
  let { data } = await getBuildingList(formData.community_code);
  buildingList.value = data;
};

const onSubmit = async () => {
  try {
    await form.value.validate();
    const data = toRaw(formData);
    console.log(data);
    formData.id ? await editHoustLoist(data) : await addHouseList(data);
    ElMessage.success("提交成功");
    isShow.value = false;
    emit("updateList");
  } catch (error) {
    console.log(error);
  }
};

const replayInfo = async (id) => {
  // alert(id)
  let { data } = await getHouseInfo(id);
  // console.log(res);
  Object.assign(formData, data);
  defaultFormData.enter_time = data.enter_time;
  isShow.value = true;
};

const title = computed(() => (formData.id ? "修改房产信息" : "添加房产信息"));

const closeDra = async () => {
  await nextTick(() => {
    form.value.resetFields();
  });
  defaultFormData.enter_time = 0;
  Object.assign(formData, { ...defaultFormData });
};

defineExpose({
  isShow,
  replayInfo,
});
</script>

<style lang="scss" scoped></style>
